<!--
 * @Autor: Ruohong Yu
 * @Date: 2022-12-14 17:01:00
 * @Description: file content
 * @FilePath: \ebook\src\views\store\StoreCategory.vue
-->
<template>
  <div class="store-category" ref="storeshelf">
    <shelf-title :title="shelfCategory.title"></shelf-title>
    <scroll class="store-shelf-scroll-wrapper"
            :top="0"
            :bottom="scrollBottom"
            @onScroll="onScroll"
            ref="scroll"
            v-if="IfShowList">
      <shelf-list :top="42" :data="shelfCategory.itemList"></shelf-list>
    </scroll>
    <div class="store-shelf-empty-view" v-else>
      {{$t('shelf.groupNone')}}
    </div>
    <shelf-footer></shelf-footer>
  </div>
</template>

<script>
import ShelfTitle from '../../components/shelf/ShelfTitle.vue'
import { storeShelfMixin } from '../../utils/mixin'
import Scroll from '../../components/common/Scroll.vue'
import ShelfList from '../../components/shelf/ShelfList.vue'
import ShelfFooter from '../../components/shelf/ShelfFooter.vue'

export default {
  mixins: [storeShelfMixin],
  components: {
    ShelfTitle,
    Scroll,
    ShelfList,
    ShelfFooter
  },
  watch: {
    isEditMode (isEditMode) {
      this.scrollBottom = isEditMode ? 48 : 0
      this.$nextTick(() => {
        this.$refs.scroll.refresh()
      })
    },
    screenWidth: function (n, o) {
      if (n > 1332) {
        this.$refs.storeshelf.style.width = '1332px'
      }
    }
  },
  computed: {
    IfShowList () {
      return this.shelfCategory.itemList && this.shelfCategory.itemList.length > 0
    }
  },
  data () {
    return {
      scrollBottom: 0,
      screenWidth: null
    }
  },
  methods: {
    onScroll (offsetY) {
      this.setOffsetY(offsetY)
    }
  },
  mounted () {
    this.getCategoryList(this.$route.query.title)
    this.setCurrentType(2)
    // 获取屏幕尺寸
    this.screenWidth = document.body.clientWidth
    window.onresize = () => {
      // 屏幕尺寸变化
      return (() => {
        this.screenWidth = document.body.clientWidth
      })()
    }
  }
}
</script>

<style lang="scss" scoped>
  .store-category{
    position: relative;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: white;
    margin: 0 auto;
    .store-shelf-scroll-wrapper{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 101;
    }
    .store-shelf-empty-view{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      font-size: px2rem(14);
      color: #333;
      @include center;
    }
  }
</style>
